<template>
	<view class="container">
		<public-module></public-module>
		
		<u-popup :show="isPayPopup" mode="bottom"  @close="closePay()" round="10">
		    <f-pay :show="isPayPopup" :payMoney="currentPrice" :tradeNo="tradeNo" :orderId="orderId" :shopName="shopName"></f-pay>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<!-- 内容区域 -->
		<scroll-view scroll-y class="content" :style="{ paddingBottom: '120rpx' }">
			<!-- 服务地址区块 -->
			<view class="card">

				<view class="form-item" @click="goAddressManage">
					<text class="item-label">
						服务地址
						<text style="color: red">*</text>
					</text>
					<view class="item-content">
						<text class="address-text" v-if="selectedAddress">{{ selectedAddress.province }}/{{ selectedAddress.city }}/{{ selectedAddress.district }}</text>
						<text v-else class="placeholder">请选择服务地址</text>
						<u-icon name="arrow-right" color="#999" size="14"></u-icon>
					</view>
				</view>
				<!-- 超时提示 -->
				<view v-if="!isRegion" class="timeout-tip">
					<text class="tip-icon">!</text>
					<text class="tip-text">当前地区还未开通！敬请期待~</text>
				</view>
				
				<view class="form-item">
					<text class="item-label">
						服务小区
						<text style="color: red">*</text>
					</text>
					<u-input v-model="form.community" placeholder="完整小区名，例：富力中心北区" border="none" placeholder-class="placeholder-style" />
				</view>

				<view class="form-item">
					<text class="item-label">
						详细地址
						<text style="color: red">*</text>
					</text>
					<u-input v-model="form.address" placeholder="详细地址，例：A座102室" border="none" placeholder-class="placeholder-style" />
				</view>
			</view>

			<!-- 联系人区块 -->
			<!-- 联系人 -->
			<view class="card">
				<view class="form-item">
					<text class="item-label">
						联系人
						<text style="color: red">*</text>
					</text>
					<u-input v-model="form.consignee" placeholder="联系人姓名" border="none" placeholder-class="placeholder-style" />
				</view>

				<view class="form-item">
					<text class="item-label">
						性别
						<text style="color: red">*</text>
					</text>
					<view class="item-content">
						<u-radio-group style="justify-content: space-around" v-model="form.gender">
							<u-radio name="0" label="先生"></u-radio>
							<u-radio name="1" label="女士"></u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="form-item">
					<text class="item-label">
						联系电话
						<text style="color: red">*</text>
					</text>
					<u-input v-model="form.phone" placeholder="请输入手机号" type="number" border="none" placeholder-class="placeholder-style" />
				</view>
			</view>

			<!-- 服务时间类型选择 -->
			<view class="card">
				<view class="form-item  service-type-item">
					<text class="item-label-leixing">
						服务类型
						<text style="color: red">*</text>
					</text>
					<view class="type-selector">
						<view 
							v-for="(type, key) in serviceTypes" 
							:key="key"
							class="type-item"
							:class="{ 'active': serviceType === key }"
							@click="selectServiceType(key)"
						>
							<text>{{ type.label }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 服务项目区块 -->
			<!-- 服务项目区块 -->
			<view class="card">
				<view class="form-item service-item">
				  <view class="service-content">
				    <u-image :src="project.cover_img" width="140rpx" height="140rpx" radius="12rpx" lazy-load></u-image>
				    
				    <view class="service-details">
				      <text class="service-title">{{ project.name }}</text>
				      
				      <view class="service-meta">
				        <view class="meta-item">
				          <text class="meta-label">开始日期：</text>
				          <text class="meta-value">{{ serviceDateStart }}</text>
				        </view>
						<view class="meta-item">
						  <text class="meta-label">结束日期：</text>
						  <text class="meta-value">{{ serviceDateEnd }}</text>
						</view>
				        <view class="meta-item">
				          <text class="meta-label">服务天数：</text>
				          <text class="meta-value">{{ serviceDays }}天</text>
				        </view>
				      </view>
				    </view>
					<view class="price-info-project">
					  <text class="current-price">{{ currentPrice / 100 }}元</text>
					  <text v-if="marketPrice > currentPrice" class="market-price">
					    市场价{{ marketPrice / 100 }}元
					  </text>
					</view>
				  </view>
				  

				</view>
			</view>

			<!-- 商家捎话区块 -->
			<view class="card">
				<view class="form-item">
					<text class="item-label">给商家捎句话</text>

					<!-- 预设标签 -->
					<view class="preset-grid">
						<view v-for="(item, index) in presetRemarks" :key="index" class="preset-item" @click="handleSelectPreset(item)">
							{{ item }}
						</view>

						<!-- 输入框（修正颜色绑定） -->
						<u-textarea
							v-model="form.remarks"
							placeholder="点击输入备注内容"
							:border="form.remarks ? 'bottom' : 'none'"
							:auto-height="true"
							:count="false"
							:custom-style="{
								padding: '20rpx 0',
								fontSize: '28rpx',
								flex: 2,
								lineHeight: '1.4',
								minHeight: '80rpx'
							}"
						>
							<template #right>
								<u-icon name="edit-pen" size="18" :color="form.remarks ? tempColor || '#FF5A5F' : '#999'"></u-icon>
							</template>
						</u-textarea>
					</view>
				</view>
			</view>

			<!-- 超时提示 -->
<!-- 			<view class="timeout-tip">
				<text class="tip-icon">!</text>
				<text class="tip-text">如遇订单高峰期，到达预约时间仍无人接单，可修改时间重新预约</text>
			</view> -->
		</scroll-view>

		<!-- 底部支付栏 -->
		<view class="footer-bar">
			<view class="price-info">
				<text class="total">待支付{{ currentPrice / 100 }}元</text>
				<text class="discount" v-if="marketPrice > currentPrice">
					已优惠{{ (marketPrice - currentPrice) / 100 }}元
				</text>
			</view>
			<u-button
				@click="submitOrder"
				shape="circle"
				:custom-style="{
					width: '240rpx',
					height: '80rpx',
					background: tempColor,
					fontSize: '32rpx',
					color: '#fff'
				}"
			>
				立即购买
			</u-button>
		</view>
	</view>
</template>

<script>
import { getProjectDetail } from '@/apis/index_callback.js';
import { getAddressList, getRegion } from '@/apis/address_callback.js';
import { saveOrder, delOrder } from '@/apis/order_callback.js';
import theme from '@/common/theme';
import store from '@/store';
import { setPay , wxPublicPay } from '@/config/pay'; //支付需进入设置您的支付接口
import fPay from '@/components/module/f-pay/f-pay';


export default {
	components:{
	    fPay
	},
	data() {
		return {
			tempColor: theme.btnDefaultBg, // 主题色
			project: {
							market_price_duration: {}, // 确保有默认对象
							period_pricing: {},
							period_duration: {}
						},
			userInfo: store.state.userInfo,
			presetRemarks: ['请不要敲门（默认）', '请敲门叫我', '请提前电话联系', '请不要电话联系（默认）'],
			// 留言内容
			selectedAddress: null,
			show: false,
			//支付弹窗
			isPayPopup:false,
			reservationTime: '请选择时间',
			// 服务类型相关数据
			serviceType: '', // 当前选中的服务类型
			serviceTypes: {
				'day': { label: '日' },
				'month': { label: '月' },
				'quarter': { label: '季' },
				'year': { label: '年' },
			},
			serviceStartDate: '', // 服务开始日期
			serviceEndDate: '',   // 服务结束日期
			serviceDays: 0,       // 服务天数
			currentPrice: 0,      // 当前价格
			shopName: "",      // 支付名称
			marketPrice: 0,       // 市场价格
			isRegion: true,       // 当前区域是否可以下单
			tradeNo: "",       // 订单信息
			orderId: "",       // 订单ID
			Region: {},       // 当前区域是否可以下单

			form: {
				consignee: '', // 收货人
				gender: '', // 性别
				phone: '', // 联系电话
				province: '', // 省
				city: '', // 市
				district: '', // 区
				district_code: '', // 区
				address: '', // 详细地址（门牌号）
				community: '', // 小区
				project_id: '',
				remarks: '',
				service_type: '', // 新增服务类型
				service_start: '', // 服务开始日期
				service_end: '', // 服务结束日期
				service_duration: '', // 服务天数
				total_amount: '', // 金额
				market_price: '', // 市场价格
				region_id: '', // 市场价格
				service_serviceman_price: '', //分成比例
			},
			phoneReg: /^1[3-9]\d{9}$/,

			appointTime: [],
			timeInterval: 1 //时间间隔,小时为单位
			// disableTimeSlot: [['2022-10-17 09:00:00', '2022-10-17 10:00:00']]
		};
	},
	onShow() {
		const address = uni.getStorageSync('selectedAddress');
		if (address) {
			this.selectedAddress = address;
			this.form.phone = address.phone;
			this.form.province = address.province;
			this.form.city = address.city;
			this.form.district = address.district;
			this.form.district_code = address.district_code;
			this.form.address = address.address;
			this.form.community = address.community;
			this.form.consignee = address.consignee;
			uni.removeStorageSync('selectedAddress'); // 清除缓存
			this.getRegionOne(address.district_code)
		} else {
			this.initData();
		}
	},
	computed: {
		// 计算服务日期范围显示
		serviceDateStart() {
			if (this.serviceStartDate) {
				return `${this.serviceStartDate}`;
			}
			return '请选择服务类型';
		},
		serviceDateEnd() {
			if (this.serviceEndDate) {
				return `${this.serviceEndDate}`;
			}
			return '请选择服务类型';
		}
	},

	onLoad(e) {
		if (e.id) {
			this.id = e.id;
			this.serviceType = e.period;
		}
		this.getDetail();
	},

	methods: {
		open() {},
		close() {
			this.show = false;
		},
		showTimePicker() {
			this.show = true;
		},
		initData() {
			this.form.consignee = this.userInfo.name;
			this.form.phone = this.userInfo.telephone;
			this.form.gender = this.userInfo.gender;
		},
		closePay(){
			uni.showModal({
				title: '确认取消',
				content: '确定要取消支付订单吗？',
				success: async (res) => {
					if (res.confirm) {
						this.isPayPopup = false
						// delOrder(
						// 	[this.orderId]
						// );
					}
				}
			});
		},
		openPay(){
		    this.isPayPopup = true
		},
		// 微信小程序支付
		onWxPay(){
		    // #ifdef MP-WEIXIN
		    this.onPay('mpwxpay',this.tradeNo)
		    // #endif
		    // #ifndef MP-WEIXIN
		    this.$u.toast('微信小程序才能用哦~')
		    // #endif
		},
		//支付(app、小程序)
		onPay(type,tradeNo){
			setPay({
				type: type,  // 支付平台
				tradeNo: tradeNo // 订单编号
			},res => {
				// 小程序支付的回调
				if(res.success){
		            uni.$u.toast('支付成功')
				}else{
		            uni.$u.toast('支付失败')
				}
			})
		},
		generateOrderNo(userId) {
			const date = new Date();

			// 格式化时间为：YYYYMMDDHHmmss
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');
			const seconds = date.getSeconds().toString().padStart(2, '0');

			const timeStr = `${year}${month}${day}${hours}${minutes}${seconds}`;

			// 生成3位随机数
			const randomStr = Math.floor(Math.random() * 900 + 100).toString(); // 100 ~ 999

			// 拼接订单号
			const orderNo = timeStr + userId + randomStr;

			return orderNo;
		},
		submitOrder() {
			// 1. 表单校验
			if (!this.jiaoyan()) {
				return;
			}

			this.form.user_id = this.userInfo.id;
			this.form.orderNo = this.generateOrderNo(this.userInfo.id);
			this.form.service_type = this.serviceType;
			this.form.service_start = this.serviceStartDate;
			this.form.service_end = this.serviceEndDate;
			this.form.service_duration = this.serviceDays;
			this.form.total_amount = this.currentPrice;
			this.form.serviceman_price = this.project.serviceman_price;
			this.form.market_price = this.marketPrice;
			this.form.region_id = this.Region.id;
			this.form.city_code = this.Region.parent_id;
						

			// 3. 提交订单
			store.commit('setLoadingShow', true);
			saveOrder(
				this.form,
				(res) => {
					this.tradeNo = res.orderNo
					this.orderId = res.id

					store.commit('setLoadingShow', false);
					this.openPay()

					// uni.redirectTo({
					// 	url: '/pages2/order/success?id=' + res.id
					// });
				},
				(err) => {
					console.error('获取项目详情失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			);
		},
		jiaoyan() {
			if(!this.isRegion){
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '当前地区暂未开通！'
				});
				return false;
			}
			if (!this.form.province && !this.form.city && !this.form.district) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请选择服务地址'
				});
				return false;
			}
			if (!this.form.community) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请填写小区'
				});
				return false;
			}

			if (!this.form.address) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请填写门牌号'
				});
				return false;
			}

			if (!this.form.consignee) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请填写联系人姓名'
				});
				return false;
			}

			if (!this.form.gender) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请选择性别'
				});
				return false;
			}

			if (!this.form.phone || !this.phoneReg.test(this.form.phone)) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请输入有效的手机号'
				});
				return;
			}

			// 增加服务类型校验
			if (!this.serviceType) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请选择服务类型'
				});
				return false;
			}
			
			return true;
		},
		// 选择预设留言
		handleSelectPreset(text) {
			this.form.remarks = text;
		},
		// 跳转到地址管理
		goAddressManage() {
			uni.navigateTo({
				url: '/pages2/address/index?from=order'
			});
		},
		// 选择服务类型
		selectServiceType(type) {
			this.shopName =this.project.name+" ("+ this.project.period_name[type]+")"
			this.serviceType = type;
			this.calculateServiceDates();
			this.updatePrices();
		},
		
		// 计算服务日期
		calculateServiceDates() {
			if (!this.serviceType || !this.project.period_duration) return;
			
			// 从项目数据中获取天数
			const days = this.project.period_duration[this.serviceType];
			if (!days) return;
			
			// 计算开始日期（第二天）
			const startDate = new Date();
			startDate.setDate(startDate.getDate() + 1);
			
			// 计算结束日期
			const endDate = new Date(startDate);
			endDate.setDate(endDate.getDate() + parseInt(days) - 1);
			
			// 格式化日期
			this.serviceStartDate = this.formatDate(startDate);
			this.serviceEndDate = this.formatDate(endDate);
			this.serviceDays = days;
		},
		
		// 格式化日期为 YYYY-MM-DD
		formatDate(date) {
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		// 更新价格信息
		updatePrices() {
			if (!this.serviceType || !this.project) return;
			
			// 从项目数据中获取价格
			this.currentPrice = this.project.period_pricing[this.serviceType] || 0;
			this.marketPrice = this.project.market_price_duration[this.serviceType] || 0;
		},
		
		async getDetail() {
			store.commit('setLoadingShow', true);
			let id = this.id;
			getProjectDetail(
				{
					id
				},
				(res) => {
					res.rotation = JSON.parse(res.rotation);
					// 解析JSON格式的字段
					res.market_price_duration = JSON.parse(res.market_price_duration);
					res.period_pricing = JSON.parse(res.period_pricing);
					res.period_duration = JSON.parse(res.period_duration);
					res.period_name = JSON.parse(res.period_name);
					
					this.project = res;
					this.form.project_id = res.id;
					//设置展示的服务类型名称
					const periodName = res.period_name;
					Object.keys(periodName).forEach(key => {
					  if (this.serviceTypes[key]) {
					    this.$set(this.serviceTypes[key], 'label', periodName[key]);
					  }
					});
					this.shopName =this.project.name+" ("+ this.project.period_name[this.serviceType]+")"
					this.calculateServiceDates();
					this.updatePrices();
				},
				(err) => {
					console.error('获取项目详情失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			);
			getAddressList(
				{
					user_id: this.userInfo.id,
					is_default: true
				},
				(res) => {
					if (res.length > 0) {
						let addres = res[0];
						this.selectedAddress = addres;
						this.form.phone = addres.phone;
						this.form.province = addres.province;
						this.form.city = addres.city;
						this.form.district = addres.district;
						this.form.district_code = addres.district_code;
						this.form.address = addres.address;
						this.form.community = addres.community;
						this.form.consignee = addres.consignee;
						
						this.getRegionOne(addres.district_code)
					}
				},
				(err) => {
					console.error('获取项目详情失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			);

			store.commit('setLoadingShow', false);
		},
		
		async getRegionOne(code) {
			// 模拟API请求
			getRegion(
				code,
				(res) => {
					// 如果未开通需要限制
					if(res.length==0){
						this.isRegion = false
					}else{
						this.isRegion = true
						this.Region = res[0]
					}
				},
				(err) => {
					this.$refs.uToast.show({
						type: 'error',
						position: 'top',
						title: '错误',
						message: '获取失败'
					});
				}
			);
		}
	}
	// 其他逻辑...
};
</script>

<style lang="scss" scoped>
@import '@/common/variables.scss'; // ✅ 必须引入

.footSizeBize {
	fontsize: $font-size-base;
}
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

.card {
	margin: 20rpx 24rpx;
	padding: 0 24rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.item-label {
			font-size: $font-size-base;
			font-weight: 500;
			color: #333;
			flex: 0 0 160rpx;

			.service-duration {
				font-size: $font-size-sm;
				color: #999;
				margin-left: 16rpx;
			}
		}
		
		.item-label-leixing {
			font-size: $font-size-base;
			font-weight: 500;
			color: #333;
			flex: 0 0 50rpx;
		
			.service-duration {
				font-size: $font-size-sm;
				color: #999;
				margin-left: 16rpx;
			}
		}
		

		.item-content {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: $font-size-base;
			// min-height: 48rpx;

			.address-text,
			.time-text {
				font-size: $font-size-base;
				color: #666;
				margin-right: 16rpx;
			}

			.price {
				color: $cl-price;
				font-weight: 500;
			}

			.count-control {
				display: flex;
				align-items: center;
				border: 1rpx solid #eee;
				border-radius: 8rpx;

				.count-btn {
					width: 56rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					color: #666;
				}

				.count-num {
					width: 72rpx;
					text-align: center;
					border-left: 1rpx solid #eee;
					border-right: 1rpx solid #eee;
				}
			}
		}
	}
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.address-row {
	@extend .flex-between;
	margin-bottom: 24rpx;

	.main-address {
		font-size: 28rpx;
		color: #333;
	}
}

.price-control {
	display: flex;
	align-items: center;
	gap: 24rpx;

	.count-btn-group {
		display: flex;
		align-items: center;
		border: 1rpx solid #eee;
		border-radius: 8rpx;

		.count-btn {
			width: 56rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			color: #666;
			font-size: 32rpx;
		}

		.count-number {
			width: 72rpx;
			text-align: center;
			color: #333;
			font-size: 28rpx;
			border-left: 1rpx solid #eee;
			border-right: 1rpx solid #eee;
		}
	}
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32rpx;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);

	.price-info {
		.total {
			font-size: 32rpx;
			color: $cl-price;
			font-weight: 500;
		}

		.discount {
			display: block;
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
		}
	}
}

.timeout-tip {
	padding: 24rpx;
	background: #fff7e6;
	margin: 24rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: flex-start;

	.tip-icon {
		color: #ffaa00;
		font-size: 24rpx;
		margin-right: 12rpx;
	}

	.tip-text {
		color: #666;
		font-size: 24rpx;
		line-height: 36rpx;
	}
}

.placeholder-style {
	color: #999 !important;
	font-size: $font-size-base !important;
}

.u-input {
	v-deep .u-input__input {
		font-size: $font-size-base !important;
		text-align: right;
		color: #666 !important;
	}
}

// 单选框样式
.u-radio-group {
	v-deep .u-radio {
		margin-left: 40rpx;

		&__label {
			font-size: $font-size-base !important;
		}
	}
}

/* 服务项样式 */
.service-item {
	align-items: flex-start !important;
	padding: 24rpx 0 !important;

	.service-info {
		flex: 1;
		margin: 0 24rpx;

		.line {
			display: block;
			margin-bottom: 8rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.service-title {
			font-size: $font-size-lg;
			color: #333;
		}

		.service-tips {
			font-size: $font-size-sm;
			color: #666;
		}
	}

	.price-box {
		text-align: right;

		.price {
			font-size: 36rpx;
			color: $cl-price;
			font-weight: 500;
		}

		.unit {
			font-size: $font-size-sm;
			color: #999;
		}
	}

	.u-image {
		border: 1rpx solid #f5f5f5;
	}
}

/* 商家捎话新样式 */
.preset-grid {
	margin-left: 30rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	flex: 2;

	.preset-item {
		padding: 10rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: $font-size-xs;
		color: #666;
		text-align: center;
		transition: all 0.2s;

		&:active {
			background: #eee;
			transform: scale(0.98);
		}
	}
}

/* 输入框动态样式 */
.u-input {
	v-deep .u-input__input {
		min-height: 80rpx;
	}

	v-deep .u-input__content__border {
		transition: all 0.3s;
	}
}


/* 新增服务类型选择器样式 */

.service-type-item {
  flex-direction: column;
  align-items: flex-start;
  
  .item-label {
    margin-bottom: 20rpx;
  }
  
  .type-selector {
    width: 100%;
  }
}

.type-selector {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	
	.type-item {
		flex: 1;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 8rpx;
		background-color: #f8f8f8;
		margin: 0 10rpx;
		font-size: $font-size-base;
		color: #666;
		transition: all 0.3s;
		
		&:first-child {
			margin-left: 0;
		}
		
		&:last-child {
			margin-right: 0;
		}
		
		&.active {
			background-color: $btn-primary-bg;
			color: #fff;
			font-weight: bold;
			box-shadow: 0 4rpx 12rpx rgba(255, 90, 95, 0.3);
		}
	}
}

/* 价格样式调整 */
.price-box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 140rpx;
	
	.price {
		font-size: 36rpx;
		color: $cl-price;
		font-weight: 500;
		line-height: 1.4;
	}
	
	.unit {
		font-size: $font-size-sm;
		color: #999;
	}
	
	.market-price {
		text-decoration: line-through;
		color: #999;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
}

/* 服务项目布局优化 */
.service-item {
  flex-direction: column;
  
  .service-content {
    display: flex;
    width: 100%;
    margin-bottom: 20rpx;
    
    .u-image {
      flex-shrink: 0;
      margin-right: 24rpx;
    }
    
    .service-details {
      flex: 1;
	  margin-left: 20rpx;
      min-width: 0; /* 防止溢出 */
      
      .service-title {
        display: block;
        font-size: $font-size-lg;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .service-meta {
        .meta-item {
          margin-bottom: 8rpx;
          display: flex;
          
          .meta-label {
            color: #666;
            font-size: $font-size-sm;
            flex-shrink: 0;
          }
          
          .meta-value {
            color: #333;
            font-size: $font-size-sm;
            word-break: break-all;
          }
        }
      }
    }
  }
  
  .price-info {
    align-self: flex-end;
    text-align: right;
    
    .current-price {
      font-size: 40rpx;
      font-weight: bold;
      color: $cl-price;
      line-height: 1.4;
    }
    
    .market-price {
      display: block;
      font-size: $font-size-sm;
      color: #999;
      text-decoration: line-through;
    }
  }
  
  .price-info-project {
    align-self: flex-start;
    text-align: right;
    
    .current-price {
      font-size: 40rpx;
      font-weight: bold;
      color: $cl-price;
      line-height: 1.4;
    }
    
    .market-price {
      display: block;
      font-size: $font-size-sm;
      color: #999;
      text-decoration: line-through;
    }
  }
}

/* 底部价格信息样式调整 */
.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32rpx;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);
	
	.price-info {
		display: flex;
		flex-direction: column;
		
		.total {
			font-size: 32rpx;
			color: $cl-price;
			font-weight: 500;
		}
		
		.discount {
			font-size: 24rpx;
			color: #999;
			margin-top: 4rpx;
		}
	}
}

.timeout-tip {
	padding: 24rpx;
	background: #fff7e6;
	margin: 24rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: flex-start;

	.tip-icon {
		color: #ffaa00;
		font-size: 24rpx;
		margin-right: 12rpx;
	}

	.tip-text {
		color: #666;
		font-size: 24rpx;
		line-height: 36rpx;
	}
}

.placeholder-style {
	color: #999 !important;
	font-size: $font-size-base !important;
}
</style>
